<template>
  <el-card>
    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="$router.push('/category/add')">添加分类</el-button>
    <el-divider></el-divider>
    <el-table
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :data="list"
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="catename" label="分类名称" width="180"></el-table-column>
      <el-table-column prop="icon" label="分类图标">
        <template v-slot="scope">
          <el-image v-if="scope.row.img!=''" :style="{width:'100px'}" :src="$imgBaseUrl+scope.row.img"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.status==1">启用</el-tag>
            <el-tag type="error" v-else>启用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template>
          <el-button type="primary" icon='el-icon-edit' circle ></el-button>
          <el-button type="danger" icon='el-icon-delete' circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    async getCateList() {
      const res = await this.$http.get("/api/catelist", {
        params: { istree: 1 }
      });
      console.log(res);
      if (res.code == 200) {
        this.list = res.list;
      }
    }
  }
};
</script>

<style>
</style>